<template>
	<div class="search_popup">
		<!--首页弹出层搜索框-->
		<van-search v-model="keywordVal"
					shape="round"
					show-action
					:placeholder="placeholderVal"
					@search="onSearch"
					@cancel="onCancel"
					@input="onInput" />
		<!--弹出层热门/推荐组件-->
		<HistorHot @tagHisClick="tagHisClick"
				   @tagHotClick="tagHotClick"
				   v-if="blockShow===1"
				   :historyKeywordList="searchList.historyKeywordList"
				   :hotKeywordList="searchList.hotKeywordList" />
		<!--搜搜推荐列表组件-->
		<SearchTipsList @searchClick="tagHisClick"
						v-if="blockShow===2"
						:searchTipsListData="searchTipsListData" />
		<!--搜索产品展示组件-->
		<SearchProducts @priceChange="priceChange"
						@categoryChange="categoryChange"
						v-if="blockShow==3"
						:goodsList="goodsList"
						:filterCategory="filterCategory" />
	</div>
</template>

<script>
import { getSearchList, getSearchTipsListData, getGoodsList } from "@/network/api";
import HistorHot from "@/components/homeComp/HistorHot";
import SearchTipsList from "@/components/homeComp/SearchTipsList";
import SearchProducts from "@/components/homeComp/SearchProducts";
// import {request} from "../../network/requess";

export default {
	name: "SearchPopup",
	created() {
		// 获取搜索弹出框的数据
		this.getSearchLists()
	},
	components: {
		HistorHot, SearchTipsList, SearchProducts
	},
	data() {
		return {
			keywordVal: '',
			// 搜索框占位符文本
			placeholderVal: '',
			// 控制搜索展示的组件默认为1
			blockShow: 1,
			// 获取到的搜索框数据
			searchList: {},
			// 防抖常量
			timer: null,
			// 搜索提示实时列表数据
			searchTipsListData: [],
			// 搜索获取的商品数据
			goodsList: [],
			// 下拉框分类列表数据
			filterCategory: [],
			page: 1,
			size: 10,
			// 排序
			order: 'desc',
			// 类别id，代表下拉菜单中的全部、居家等选项
			categoryId: 0,
			// 请求种类可以是id或price
			sort: 'id'
		}
	},
	methods: {
		// HistorHot组件发送过来的请求，点击热门推荐下的tag标签，发起查询商品请求
		tagHotClick(val) {
			this.keywordVal = val
			this.onSearch(val)
		},
		// HistorHot组件发送过来的请求，点击历史记录下的tag标签，发起查询商品请求
		tagHisClick(val) {
			this.keywordVal = val
			this.onSearch(val)
		},
		// searchTipsList 组件传过来的事件，点击搜索推荐列表发起请求
		searchClick(val) {
			this.onSearch(val)
		},
		// 搜索完成发送请求
		onSearch(val) {
			getGoodsList(val, this.page, this.size, this.order, this.categoryId, this.sort,).then(res => {
				if (res.errno === 0) {
					// console.log(res)
					let { goodsList, filterCategory } = res.data
					this.goodsList = res.data.goodsList
					// 因为后台返回的数据跟ui框架需要的字段不符，以下是做转换
					let newArr = JSON.parse(JSON.stringify(filterCategory).
						replace(/name/g, 'text').
						replace(/id/g, 'value'))
					this.filterCategory = newArr
				}
			})
			this.blockShow = 3
		},
		onCancel() {
			this.$router.go(-1)
		},
		getSearchLists() {
			getSearchList().then(res => {
				if (res.errno === 0) {
					this.searchList = res.data
					this.placeholderVal = res.data.defaultKeyword.keyword
				}
			})
		},
		// 搜搜输入框输入时触发请求
		onInput(val) {
			this.blockShow = 2
			if (this.timer) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				getSearchTipsListData(val).then(res => {
					if (res.errno === 0) {
						// console.log(res)
						this.searchTipsListData = res.data
					}
				})
			}, 500)
		},
		// searchProducts组件发送过来的事件，发送请求改变分类的id
		categoryChange(value) {
			this.categoryId = value
			this.onSearch(this.keywordVal)
		},
		// searchProducts组件发送过来的事件，发送请求控制价格排序
		priceChange(value) {
			this.order = value
			this.sort = 'price'
			this.onSearch(this.keywordVal)
		}
	}
}
</script>

<style lang="less" scoped>
.search_popup {
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	background-color: #efefef;
	z-index: 999;
}
</style>